<template>
  <div class="container">
    <swiper :banner="banner"></swiper>
    <div class="tjkc" v-if="recommendList">
      <div class="top">
       <span class="title">推荐课程</span>
     <!--    <span @click="$router.push('/course')">查看全部</span> -->
      </div>
      <div class="tjbox" :key="index" v-for="(item,index) in recommendList" @click="$router.push({path: '/Course_info', query: {id: item.id}})">
        <img :src="item.cover" alt="">
      </div>
    </div>
    <home-item name="VIP课程" :items="vipList"></home-item>
   <!-- <home-item name="其他课程" :items="otherList"></home-item> -->
    <bottom-nav :idx="0"></bottom-nav>
  </div>
</template>

<script>
import HomeItem from './HomeItem'
import BottomNav from './BottomNav'
import NavList from './NavList'
import swiper from './swiper'
import * as info from '../api/info'

export default {
  name: 'Home',
  components: {
    swiper: swiper,
    'nav-list': NavList,
    'bottom-nav': BottomNav,
    'home-item': HomeItem
  },
  data: function () {
    return {
      banner: [],
      courseList: [],
      recommendList: [],
      vipList: [],
      otherList: []
    }
  },
  // computed: {
  //   vipCourses () {
  //     if (this.vipList.Courses) {
  //       return this.vipList.Courses.slice(0, 4)
  //     }
  //   },
  //   otherCourses () {
  //     if (this.otherList.Courses) {
  //       return this.otherCourses.slice(0, 2)
  //     }
  //   }
  // },
  mounted () {
    this.getBanner()
    this.getRecommend()
    this.getRecommendCourses({cate_id: 4, page: 1, perPage: 1})
    this.getVipCourses({cate_id: 1, page: 1, perPage: 4})
    this.getOtherCourses({case_id: 3, page: 1, perPage: 4})
  },
  methods: {
    lunbo: function () {
      let mySwiper = new Swiper('.swiper-container', {
        pagination: {
          el: '.swiper-pagination'
        },
        loop: true,
        autoplay: true
      })
    },
    getBanner () {
      let that = this
      info.getBanners(1, 5).then(res => {
        that.banner = res.data
        that.$nextTick(function(){
          that.lunbo()
        })
      })
    },
    getRecommend () {
      info.getRecommend().then(res => {
        //   if (data[i].sort == 1) {
        //     this.recommendList = data[i]
        //   } else if (data[i].sort == 2) {
        //     this.vipList = data[i]
        //     console.log(data[i])
        //   } else if (data[i].sort == 3) {
        //     this.otherList = data[i]
        //   }
        // }
      })
    },
    getRecommendCourses: function (params) {
      info.getCourses(params)
        .then(res => {
          this.recommendList = res.data
        })
    },
    getVipCourses: function (params) {
      info.getCourses(params)
        .then(res => {
          this.vipList = res.data
        })
    },
    getOtherCourses: function (params) {
      info.getCourses(params)
        .then(res => {
          this.otherList = res.data
        })
    }
  }
}
</script>

<style scoped>
.tjkc .top,
.teacher .top{
  display: flex;
  justify-content: space-between;
  height: 1.2rem;
  align-items: center;
  padding: 0 .4rem;
}
.top span{
  font-size: .36rem;
}
.tjkc .top .title,
.teacher .title{
  font-size: .46rem;
  font-weight: bold;
  color: #0959c8;
  position: relative;
  padding-left: 5px;
}
.tjkc .top .title::before{
  content: '';
  position: absolute;
  width: 2px;
  top: 3px;
  bottom: 3px;
  background: #007aff;
  left: 0;
}
.tjbox{
  padding: 0 .3rem .3rem;
}
.tjbox img{
  display: block;
}
.tlist{
  padding: 0 .3rem .5rem;
  display: flex;
  justify-content: space-between;
}
.titem{
  width: 30%;
}
.tinfo h3{
  font-size: .4rem;
}
.tinfo p{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: .46rem;
  margin-top: .1rem;
  font-size: .34rem;
}
</style>
